<template>
  <aside class="bg-white w-64 shadow-md">
    <div class="p-4">
      <div class="relative">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
          <i class="fas fa-search text-gray-400"></i>
        </span>
        <input type="text" class="pl-10 pr-4 py-2 w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500" 
          placeholder="搜索...">
      </div>
    </div>
    <nav class="mt-2">
      <a 
        @click.prevent="navigateTo('Dashboard')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('Dashboard') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-home mr-3"></i>
        <span>仪表盘</span>
      </a>
      <a 
        @click.prevent="navigateTo('Users')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('Users') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-users mr-3"></i>
        <span>用户管理</span>
      </a>
      <a 
        @click.prevent="navigateTo('Foods')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('Foods') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-apple-alt mr-3"></i>
        <span>食物数据库</span>
      </a>
      <a 
        @click.prevent="navigateTo('Recipes')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('Recipes') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-utensils mr-3"></i>
        <span>食谱管理</span>
      </a>
      <a 
        @click.prevent="navigateTo('DietRecords')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('DietRecords') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-clipboard-list mr-3"></i>
        <span>饮食记录</span>
      </a>
      <a 
        @click.prevent="navigateTo('Nutrition')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('Nutrition') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-chart-pie mr-3"></i>
        <span>营养分析</span>
      </a>
      <a 
        @click.prevent="navigateTo('Settings')" 
        href="#"
        :class="[
          'flex items-center px-4 py-3',
          isActiveRoute('Settings') 
            ? 'text-emerald-600 bg-emerald-50 border-l-4 border-emerald-600' 
            : 'text-gray-700 hover:bg-gray-50 hover:text-emerald-600'
        ]">
        <i class="fas fa-cog mr-3"></i>
        <span>系统设置</span>
      </a>
    </nav>
  </aside>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();

// 使用计算属性来判断当前路由是否匹配链接，以决定高亮状态
const isActiveRoute = (routeName) => {
  return route.name === routeName;
};

// 简化后的导航函数，使用命名路由
async function navigateTo(routeName) { // 参数现在是路由名称
  console.log(`SideNav: 开始导航到命名路由: ${routeName}`);
  try {
    // 确保认证状态在导航前是最新的
    const isAuthenticated = authStore.checkAndRefreshAuth(); 
    console.log(`SideNav: 导航前认证状态 - isLoggedIn: ${authStore.isLoggedIn}, isAuthenticated: ${isAuthenticated}`);

    if (!isAuthenticated) {
      console.warn('SideNav: 用户未认证，重定向到登录页面');
      await router.push({ name: 'login' });
      return;
    }

    // 使用router.push进行导航，避免使用window.location.href
    await router.push({ name: routeName });
    console.log(`SideNav: 导航到 ${routeName} 成功`);
  } catch (error) {
    console.error(`SideNav: 导航到 ${routeName} 失败:`, error);
    if (error.name === 'NavigationFailure' && error.type === router.NavigationFailureType.duplicated) {
      console.warn('SideNav: 尝试导航到当前已激活的路由。');
    } else if (error.message.includes("No match for")){
      console.error(`SideNav: 路由名称 '${routeName}' 未在路由配置中找到！请检查 router/index.js 和路由名称大小写是否一致`);
    } else {
      // 对于其他类型的导航错误，可以考虑向用户显示提示或记录错误
    }
  }
}
</script> 